<template>
  <div class="about">
    <button @click="start">start</button>

    <button @click="run">数组去重</button>
  </div>
</template>

<script lang="ts">

import reduceArray from '@/lib/ReduceArray';
import { defineComponent, ref, SetupContext } from 'vue';
import { callSerial, ICall } from '../../lib/SerialPromise';


const useReduceArray = () => {
  interface IStudent {
    gender: string;
    name: string;
    age: number;
    city: string;
    game: string;
    hometown: string,
    grade?: number;
    score?: number;
  }

  const arr: IStudent[] = [
    { gender: '男', name: '小王', age: 16, grade: 5, score: 99, hometown: '深圳', game: '和平精英', city: '广州' },
    { gender: '男', name: '小王', age: 17, grade: 5, score: 99, hometown: '深圳', game: '和平精英', city: '广州' },
    { gender: '女', name: '小王', age: 16, grade: 5, score: 99, hometown: '深圳', game: '和平精英', city: '广州' },
    { gender: '男', name: '小红', age: 16, grade: 5, score: 99, hometown: '深圳', game: '和平精英', city: '广州' },
    { gender: '男', name: '小王', age: 16, grade: 5, score: 99, hometown: '广州', game: '和平精英', city: '广州' },
    { gender: '女', name: '小王', age: 16, grade: 5, score: 99, hometown: '广州', game: '和平精英', city: '广州' },
    { gender: '女', name: '小红', age: 16, grade: 5, score: 99, hometown: '广州', game: '和平精英', city: '广州' },
    { gender: '女', name: '小王', age: 16, grade: 5, score: 99, hometown: '深圳', game: '和平精英', city: '广州' },
    { gender: '女', name: '小王', age: 16, grade: 5, score: 99, hometown: '深圳', game: '和平精英', city: '广州' },
    { gender: '女', name: '小王', age: 17, grade: 5, score: 99, hometown: '深圳', game: '王者荣耀', city: '广州' },
    { gender: '女', name: '小王', age: 17, grade: 5, score: 99, hometown: '深圳', game: '王者荣耀', city: '广州' },
    { gender: '女', name: '小王', age: 17, grade: 4, score: 99, hometown: '深圳', game: '王者荣耀', city: '深圳' },
    { gender: '女', name: '小王', age: 16, grade: 5, score: 99, hometown: '广州', game: '王者荣耀', city: '深圳' },
    { gender: '女', name: '小王', age: 17, grade: 5, score: 99, hometown: '广州', game: '王者荣耀', city: '深圳' },
    { gender: '女', name: '小王', age: 17, grade: 5, score: 99, hometown: '广州', game: '王者荣耀', city: '深圳' },
    { gender: '女', name: '小王', age: 17, grade: 5, score: 99, hometown: '广州', game: '王者荣耀', city: '深圳' },
    { gender: '女', name: '小王', age: 17, grade: 4, score: 99, hometown: '广州', game: '王者荣耀', city: '深圳' },
    { gender: '男', name: '小王', age: 17, grade: 4, score: 99, hometown: '广州', game: '王者荣耀', city: '深圳' },
    { gender: '男', name: '小王', age: 16, grade: 5, score: 99, hometown: '广州', game: '王者荣耀', city: '深圳' },
  ]

  const run = () => {
    console.log(reduceArray<IStudent>(['gender', 'name', 'age', 'grade', 'city', 'game', 'score'], arr));
  }

  return {
    run,
  }
}
// interface 

export default defineComponent({ components: { },
  setup(props: any, context: SetupContext) {

    const func =  (param: any) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log(`${param.key} is done.`);
            resolve ({
              key: param.key,
              finishTime: Date.now(),
            });
          }, param.time)
        });
      };

    const callList: ICall<any>[] = [
      {
        key: '0',
        callFunc: func,
        param: {
          key: '0',
          time: 2000,
        }
      },
      {
        key: '1',
        callFunc: func,
        param: {
          key: '1',
          time: 3000,
        },
      },
      {
        key: '2',
        callFunc: func,
        param: {
          key: '2',
          time: 1000,
        }
      }
    ];

    const methods = {
      start: () => {
        console.log('start');
        callSerial(callList).then((res) => {
          console.log(res);
        });
      },
    };


    
    

    return {
      ...methods,
      ...useReduceArray(),
    }; 
  },
}); 

</script>

<style scoped>
  .button-list div {
    /* float: left; */
    display: inline-block;
    padding: 10px;
  }
  .loading-svg {
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>